<template>
  <div class="app-container">
    <el-row>
      <el-col :span="4">
        <span>
          配置工艺路线
        </span>
      </el-col>
      <el-col :offset="19" :span="1">
        <el-button icon="el-icon-refresh" size="mini" @click="changePage()">返回</el-button>
      </el-col>
    </el-row>

    <el-row :gutter="20" style="margin: 0 30px">
      <el-col :span="8">
        工艺路线编码: <el-input disabled v-model="gyRoadData.gyroadCode"/>
      </el-col>
      <el-col :span="8">
        工艺路线名称: <el-input disabled v-model="gyRoadData.gyroadName"/>
      </el-col>
      <el-col :span="8">
        工艺路线版本: <el-input disabled v-model="gyRoadData.gyroadVersion"/>
      </el-col>
    </el-row>
    <el-divider></el-divider>

    <el-row>
      <el-col :span="6">
        <span>
          配置工艺路线流程
        </span>
      </el-col>
      <el-col :offset="16" :span="2">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="openGxChoose()"
          v-hasPermi="['scxx:gyRoad:add']"
        >新增</el-button>
      </el-col>
    </el-row>
    <el-row style="margin-top: 10px">
      <el-tag
        style="margin-left: 5px;user-select: none"
        v-for="tag in gyRoadData.gxs"
        :key="tag.gxCode"
        closable
        @close="delGxTags(tag.gxCode)"
        @click.native="getGxMessage(tag.gxCode)">
        {{tag.gxName}}
      </el-tag>
    </el-row>
    <el-row style="margin-top: 10px">
      <el-button
        type="primary"
        size="mini"
        @click="setGxSort()"
        v-hasPermi="['scxx:gyRoad:edit']"
      >修改排序</el-button>
    </el-row>
    <el-divider></el-divider>
    当前选择：{{nowGx}}
    <el-divider></el-divider>
    <el-row :gutter="30">
      <el-col :span="12">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="addScdy()"
          v-hasPermi="['scxx:gyRoad:add']"
        >新增生产单元</el-button>
        <el-table :data="scdyData">
          <el-table-column label="生产单元编码" align="center" prop="dyCode" />
          <el-table-column label="生产单元名称" align="center" prop="dyName" />
          <el-table-column label="生产单元类型" align="center" prop="dyTypeCode">
            <template slot-scope="scope">
              <dict-tag :options="dict.type.production_unit_type" :value="scope.row.dyTypeCode"/>
            </template>
          </el-table-column>
          <el-table-column label="负责人" align="center" prop="fzrCode" />
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="delScdy(scope.row.dyCode)"
                v-hasPermi="['scxx:gyRoad:remove']"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>

      <el-col :span="12">
        <el-button
          type="primary"
          plain
          icon="el-icon-plus"
          size="mini"
          @click="addUser"
          v-hasPermi="['scxx:gyRoad:add']"
        >新增人员</el-button>
        <el-table :data="userData">
          <el-table-column label="用户名" align="center" prop="userName" />
          <el-table-column label="姓名" align="center" prop="nickName" />
          <el-table-column label="电话号码" align="center" prop="phonenumber"/>
          <el-table-column label="操作" align="center" class-name="small-padding fixed-width">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="text"
                icon="el-icon-delete"
                @click="delUser(scope.row.userId)"
                v-hasPermi="['scxx:gyRoad:remove']"
              >删除</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>

<!--    <pagination-->
<!--      v-show="total>0"-->
<!--      :total="total"-->
<!--      :page.sync="queryParams.pageNum"-->
<!--      :limit.sync="queryParams.pageSize"-->
<!--      @pagination="getList"-->
<!--    />-->

    <!--    选择工序-->
    <el-dialog
      title="选择工序"
      :visible.sync="dialogVisibleGx"
      width="30%"
      @close="gxClose()">
      <el-container>
        <el-header>
          <el-row>
            <el-col :span="14">
              <el-input suffix-icon="el-icon-search" @keyup.enter.native="getGxList"
                        v-model="getGxParams.gxName"></el-input>
            </el-col>
            <el-col :span="10">
              <el-button plain style="margin-left: 10px" @click="getGxList()" type="primary">搜索</el-button>
              <el-button plain style="margin-left: 5px" @click="getGxParams.gxName='';getGxList();" type="info">重置</el-button>
            </el-col>
          </el-row>

        </el-header>
        <el-main>

          <!-- 展示工序信息 -->
          <el-table
            ref="multipleTableGx"
            :data="gxData"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="gxTableSelect">
            <el-table-column
              type="selection">
            </el-table-column>
            <el-table-column
              prop="gxCode"
              label="工序编码">
            </el-table-column>
            <el-table-column
              prop="gxName"
              label="工序名称">
            </el-table-column>
            <el-table-column prop="gxTypecode" label="工序类型">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.gx_type" :value="scope.row.gxTypecode"/>
              </template>
            </el-table-column>
          </el-table>
          <pagination
            v-show="gxTotal>0"
            :total="gxTotal"
            :page.sync="getGxParams.pageNum"
            :limit.sync="getGxParams.pageSize"
            @pagination="getGxList"
          />
        </el-main>
      </el-container>
      <span slot="footer" class="dialog-footer">
        <el-button @click="toggleSelectionGx()">重置</el-button>
        <el-button @click="gxClose">取 消</el-button>
        <el-button type="primary" @click="gxSubmit">确 定</el-button>
      </span>
    </el-dialog>

    <!--    选择生产单元-->
    <el-dialog
      title="选择生产单元"
      :visible.sync="dialogVisibleScdy"
      width="50%"
      @close="scdyClose()">
      <el-container>
        <el-header>
          <el-row :gutter="10">
            <el-col :span="10">
              <el-input suffix-icon="el-icon-search" @keyup.enter.native="getScdyList"
                        v-model="getScdyParams.dyName"></el-input>
            </el-col>
            <el-col :span="6" >
              <el-select v-model="getScdyParams.dyTypeCode" placeholder="类型选择" @change.native="getScdyList">
                <el-option
                  v-for="dict in dict.type.production_unit_type"
                  :key="dict.value"
                  :label="dict.label"
                  :value="parseInt(dict.value)"
                ></el-option>
              </el-select>
            </el-col>
            <el-col :span="8">
              <el-button plain @click="getScdyList()" type="primary">搜索</el-button>
              <el-button plain @click="getScdyParams.dyName='';getScdyParams.dyTypeCode='';
              getScdyList();" type="info">重置</el-button>
            </el-col>
          </el-row>

        </el-header>
        <el-main>

          <!-- 展示生产单元 -->
          <el-table
            ref="multipleTableScdy"
            :data="scdyShow"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="scdyTableSelect">
            <el-table-column
              type="selection">
            </el-table-column>
            <el-table-column
              prop="dyCode"
              label="生产单元编码">
            </el-table-column>
            <el-table-column
              prop="dyName"
              label="生产单元名称">
            </el-table-column>
            <el-table-column prop="dyTypeCode" label="生产单元类型">
              <template slot-scope="scope">
                <dict-tag :options="dict.type.production_unit_type" :value="scope.row.dyTypeCode"/>
              </template>
            </el-table-column>
            <el-table-column
              prop="fzrCode"
              label="负责人">
            </el-table-column>
          </el-table>
          <pagination
            v-show="scdyTotal>0"
            :total="scdyTotal"
            :page.sync="getScdyParams.pageNum"
            :limit.sync="getScdyParams.pageSize"
            @pagination="getScdyList"
          />
        </el-main>
      </el-container>
      <span slot="footer" class="dialog-footer">
        <el-button @click="toggleSelectionScdy()">重置</el-button>
        <el-button @click="scdyClose">取 消</el-button>
        <el-button type="primary" @click="scdySubmit">确 定</el-button>
      </span>
    </el-dialog>

    <!--    选择生产单元-->
    <el-dialog
      title="选择人员"
      :visible.sync="dialogVisibleUser"
      width="30%"
      @close="userClose()">
      <el-container>
        <el-header>
          <el-row>
            <el-col :span="14">
              <el-input suffix-icon="el-icon-search" @keyup.enter.native="getUserList"
                        v-model="getUserParams.nickName"></el-input>
            </el-col>
            <el-col :span="10">
              <el-button plain style="margin-left: 10px" @click="getUserList()" type="primary">搜索</el-button>
              <el-button plain style="margin-left: 5px" @click="getUserParams.nickName='';getUserList();" type="info">重置</el-button>
            </el-col>
          </el-row>

        </el-header>
        <el-main>

          <!-- 展示生产单元 -->
          <el-table
            ref="multipleTableUser"
            :data="userShow"
            tooltip-effect="dark"
            style="width: 100%"
            @selection-change="userTableSelect">
            <el-table-column
              type="selection">
            </el-table-column>
            <el-table-column
              prop="userName"
              label="用户名">
            </el-table-column>
            <el-table-column
              prop="nickName"
              label="姓名">
            </el-table-column>
            <el-table-column
              prop="phonenumber"
              label="联系电话">
            </el-table-column>
          </el-table>
          <pagination
            v-show="userTotal>0"
            :total="userTotal"
            :page.sync="getUserParams.pageNum"
            :limit.sync="getUserParams.pageSize"
            @pagination="getUserList"
          />
        </el-main>
      </el-container>
      <span slot="footer" class="dialog-footer">
        <el-button @click="toggleSelectionUser()">重置</el-button>
        <el-button @click="userClose">取 消</el-button>
        <el-button type="primary" @click="userSubmit">确 定</el-button>
      </span>
    </el-dialog>

    <!--    选择生产单元-->
    <el-dialog
      title="排序"
      :visible.sync="dialogVisibleSort"
      width="30%">
      <el-container>
        <el-main>
          <el-row :gutter="30" v-for="item in sortGx" style="margin-top: 5px">
            <el-col :span="10">
              <el-input v-model="item.gxName" disabled/>
            </el-col>
            <el-col :span="14">
              <el-input-number v-model="item.gySort" :min="1" :max="maxSort" ></el-input-number>
            </el-col>
          </el-row>
        </el-main>
      </el-container>
      <span slot="footer" class="dialog-footer">
        <el-button @click="sortClose()">取 消</el-button>
        <el-button type="primary" @click="submitSort()">确 定</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import {addGxWithGyRoad, listGyRoadConfig, listGx, delGyRoadAndGx, listScdy, addScdyWithGx, delScdy
, addUserWithGx, listUser, delUser, updateGxSort
} from "@/api/scxx/gyRoadConfig";
import {updateGyRoad} from "@/api/scxx/gyRoad";
export default {
  name: "GyRoadConfig",
  dicts: ['is_use', 'gylx_type', 'gx_type', 'production_unit_type'],
  data() {
    return {
      sortGx:[],
      // 排序最大值
      maxSort: 0,
      // 排序设置
      dialogVisibleSort:false,
      // 存放工艺路线和工序编号
      code:{
        gyroadCode:'',
        gxCode:''
      },
      // 生产单元
      scdyData:[],
      scdyShow:[],
      dialogVisibleScdy: false,
      multipleSelectionScdy: [],
      getScdyParams: {
        pageNum: 1,
        pageSize: 10,
        gxName:"",
        gyroadCode:'',
        gxCode:'',
        dyTypeCode:''
      },
      scdyTotal: 0,
      // 人员
      userData:[],
      userShow:[],
      dialogVisibleUser: false,
      multipleSelectionUser: [],
      getUserParams: {
        pageNum: 1,
        pageSize: 10,
        gxName:"",
        gyroadCode:'',
        nickName:""
      },
      userTotal: 0,
      // 物料
      wlData:[],
      // 工序
      dialogVisibleGx: false,
      gxData: [],
      multipleSelectionGx: [],
      getGxParams: {
        pageNum: 1,
        pageSize: 10,
        gxName:"",
        gyroadCode:''
      },
      gxTotal: 0,
      // 工艺路线总数据
      gyRoadData:[],
      nowGx:""
    };
  },
  created() {
    this.code.gyroadCode = this.$route.params.gyRoadCode
    this.getGylxMore()
    this.getGxParams.gyroadCode = this.code.gyroadCode
    this.getScdyParams.gyroadCode = this.code.gyroadCode
    this.getUserParams.gyroadCode = this.code.gyroadCode
  },
  methods: {
    // 取消提交，复原
    sortClose(){
      this.dialogVisibleSort = false
      this.sortGx = this.gyRoadData.gxs.map(item => {
        return {
          gxName: item.gxName,
          gxCode: item.gxCode,
          gyroadCode: this.code.gyroadCode,
          gySort: item.gySort,
          gId: item.gId
        };
      });
    },
    // 提交修改后的排序
    submitSort(){
      const moreVal = this.sortGx.some((obj, index) =>
        this.sortGx.findIndex((item) => item.gySort === obj.gySort) !== index
      );
      if (moreVal) {
        this.$message('请检查序号是否重复!');
        return false
      }
      updateGxSort(this.sortGx).then(response => {
        this.$modal.msgSuccess("修改成功");
        this.dialogVisibleSort = false;
        this.getGylxMore();
      });
    },
    // 工序排序
    setGxSort(){
      if (this.gyRoadData.gxs.length < 1){
        this.$message('请先选择工序!');
        return false
      }
      if (this.gyRoadData.gxs.length == 1){
        this.$message('当前仅有一条工序');
        return false
      }
      this.dialogVisibleSort = true

    },
    // 路由跳转
    changePage(code){
      this.$router.push({
        path: `/scxx/gyRoad`
      })
    },
    // 点击新增生产单元时的操作
    addUser(){
      if (this.code.gxCode == ''){
        this.$message('请先选择工序!');
        return false
      }
      this.dialogVisibleUser = true;
      this.getUserParams.gxCode = this.code.gxCode
      this.getUserList()
    },
    // 查询所有生产单元
    async getUserList(){
      const res = await listUser(this.getUserParams)
      this.userShow = res.rows;
      this.userTotal = res.total;1
    },
    // 获取选中的生产单元
    userTableSelect(selection){
      this.multipleSelectionUser = selection
    },
    // 生产单元取消选中
    toggleSelectionUser() {
      this.$refs.multipleTableUser.clearSelection();
    },
    // 关闭选择生产单元窗口
    userClose(){
      this.multipleSelectionUser = []
      this.getUserParams.nickName = ""
      this.$refs.multipleTableUser.clearSelection()
      this.dialogVisibleUser = false;
    },
    // 点击确定
    userSubmit(){
      if (this.multipleSelectionUser.length < 1){
        this.$message('请先选择数据!');
        return false
      }
      const userAndGx = this.multipleSelectionUser.map(item => {
        return {
          gxCode: item.gxCode,
          gyroadCode: item.gyroadCode,
          userId: item.userId
        };
      });
      addUserWithGx(userAndGx).then(response => {
        this.$modal.msgSuccess("新增成功");
        this.dialogVisibleUser = false;
        this.getGylxMoreTable()
      });
    },
    // 删除生产单元
    delUser(userId){
      const param = {
        gxCode : this.code.gxCode,
        gyroadCode : this.code.gyroadCode,
        userId : userId
      }
      delUser(param).then(response => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.getGylxMoreTable();
      });
    },

    // 点击新增生产单元时的操作
    addScdy(){
      if (this.code.gxCode == ''){
        this.$message('请先选择工序!');
        return false
      }
      this.dialogVisibleScdy = true;
      this.getScdyParams.gxCode = this.code.gxCode
      this.getScdyList()
    },
    // 查询所有生产单元
    async getScdyList(){
      const res = await listScdy(this.getScdyParams)
      this.scdyShow = res.rows;
      this.scdyTotal = res.total;
    },
    // 获取选中的生产单元
    scdyTableSelect(selection){
      this.multipleSelectionScdy = selection
    },
    // 生产单元取消选中
    toggleSelectionScdy() {
      this.$refs.multipleTableScdy.clearSelection();
    },
    // 关闭选择生产单元窗口
    scdyClose(){
      this.multipleSelectionScdy = []
      this.getScdyParams.dyName = ""
      this.getScdyParams.dyTypeCode = ""
      this.$refs.multipleTableScdy.clearSelection()
      this.dialogVisibleScdy = false;
    },
    // 点击确定
    scdySubmit(){
      if (this.multipleSelectionScdy.length < 1){
        this.$message('请先选择数据!');
        return false
      }

      const scdyAndGx = this.multipleSelectionScdy.map(item => {
        return {
          gxCode: item.gxCode,
          gyroadCode: item.gyroadCode,
          dyCode: item.dyCode
        };
      });
      addScdyWithGx(scdyAndGx).then(response => {
        this.$modal.msgSuccess("新增成功");
        this.dialogVisibleScdy = false;
        this.getGylxMoreTable()
      });
    },
    // 删除生产单元
    delScdy(dyCode){
      const param = {
        gxCode : this.code.gxCode,
        gyroadCode : this.code.gyroadCode,
        dyCode : dyCode
      }
      delScdy(param).then(response => {
        this.$message({
          type: 'success',
          message: '删除成功!'
        });
        this.getGylxMoreTable();
      });
    },


    // 获得当前工艺路线下的详细信息
    getGylxMore(){
      listGyRoadConfig(this.code).then(response => {
        this.gyRoadData = response.data;
        this.sortGx = this.gyRoadData.gxs.map(item => {
          return {
            gxName: item.gxName,
            gxCode: item.gxCode,
            gyroadCode: this.code.gyroadCode,
            gySort: item.gySort,
            gId: item.gId
          };
        });
        this.maxSort = this.gyRoadData.gxs.length
      });
    },

    // 获取所有工序数据
    async openGxChoose(){
      this.dialogVisibleGx=true;
      await this.getGxList()
    },
    // 查询所有工序
    async getGxList(){
      const res = await listGx(this.getGxParams)
      this.gxData = res.rows;
      this.gxTotal = res.total;
    },
    // 获取选中的工序
    gxTableSelect(selection){
      this.multipleSelectionGx = selection
    },
    // 工序取消选中
    toggleSelectionGx() {
      this.$refs.multipleTableGx.clearSelection();
    },
    // 关闭选择工序窗口
    gxClose(){
      this.multipleSelectionGx = []
      this.getGxParams.gxName = ""
      this.$refs.multipleTableGx.clearSelection()
      this.dialogVisibleGx = false;
    },
    // 删除工序
    delGxTags(gxCode){
      this.$confirm('此操作将永久删除该工序, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        const param = {
          gxCode : gxCode,
          gyroadCode : this.code.gyroadCode
        }
        delGyRoadAndGx(param).then(response => {
          this.$message({
            type: 'success',
            message: '删除成功!'
          });
          this.getGylxMore();
        });
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        });
      });
    },
    // 新增工序
    gxSubmit(){
      const gxAndGylx = this.multipleSelectionGx.map(item => {
        return {
          gxCode: item.gxCode,
          gyroadCode: item.gyroadCode
        };
      });
      addGxWithGyRoad(gxAndGylx).then(response => {
        this.$modal.msgSuccess("新增成功");
        this.dialogVisibleGx = false;
        this.getGylxMore();
      });
    },
    // 点击工序标签时获取表格数据
    getGxMessage(gxCode){
      this.code.gxCode = gxCode
      this.getGylxMoreTable()
    },

    getGylxMoreTable(){
      listGyRoadConfig(this.code).then(response => {
        this.userData = response.data.gxs[0].users;
        this.scdyData = response.data.gxs[0].scdys;
        this.wlData = response.data.gxs[0].wls;
        this.nowGx = response.data.gxs[0].gxName
      });
    },
  }
};
</script>
